<template>
  <!-- 表格 -->
  <a-table :columns="columns" :data="data" :pagination="false" :bordered="{ cell: true }" :span-method="dataSpanMethod">
    <template #commissionRate="{ record }">
      <div v-if="!record.isEdite">
        {{ record.commissionRate + '%' }}
        <icon-edit @click="record.isEdite = true" style="cursor: pointer" />
      </div>
      <div v-else class="flex-row">
        <i-input-number
          v-model="record.commissionRate"
          placeholder="请输入"
          unit="%"
          :min="0"
          :max="100"
          :precision="2"
          style="width: 60%"
        />
        <icon-check-circle-fill style="color: #1890ff; margin: 0 8px; cursor: pointer" :size="24" @click="submit(record)" />
        <icon-close-circle-fill style="cursor: pointer" :size="24" @click="loadData()" />
      </div>
    </template>
    <template #subject="{ record }">
      {{ record.subject || '-' }}
    </template>
  </a-table>
</template>
<script setup>
  import { getCommissionList } from '@/api/system/commission'
  import { ref, onMounted } from 'vue'

  const data = ref([])
  const emits = defineEmits(['submit'])

  // table 配置
  const columns = [
    { title: '渠道名称', dataIndex: 'channelTypeName', width: 150 },
    { title: '运营主体', dataIndex: 'subject', slotName: 'subject', width: 120 },
    { title: '平台抽佣比（%）', dataIndex: 'commissionRate', slotName: 'commissionRate', width: 150 },
  ]

  const loadData = () => {
    getCommissionList().then((res) => {
      const dataList = res.result.map((item) => {
        return {
          ...item,
          commissionRate: item.commissionRate || 0,
          isEdite: false,
        }
      })
      data.value = dataList
    })
  }

  const dataSpanMethod = ({ record, column, rowIndex }) => {
    if (column.dataIndex === 'channelTypeName') {
      // 如果是第一行或者当前记录的模块与上一行的不同
      if (rowIndex === 0 || data.value[rowIndex].channelTypeName !== data.value[rowIndex - 1].channelTypeName) {
        let rowCount = 1
        // 计算下面有多少行是相同的模块
        for (let i = rowIndex + 1; i < data.value.length; i++) {
          if (data.value[i].channelTypeName === record.channelTypeName) {
            rowCount++
          } else {
            break
          }
        }
        return {
          rowspan: rowCount,
          colspan: 1,
        }
      } else {
        // 如果当前记录的模块与上一行的相同，则这个单元格不应被渲染
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
  }

  const submit = (record) => {
    emits('submit', record)
  }

  onMounted(() => {
    loadData()
  })

  defineExpose({
    data,
    loadData,
  })
</script>
<style lang="less" scoped>
  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .page-container {
    .top {
      width: 52%;
      justify-content: space-between;
      margin-bottom: 15px;
      .title {
        font-weight: 500;
        font-size: 16px;
        color: #1d2129;
        line-height: 22px;
      }
    }
  }
</style>
